<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script src="../commonjs/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员列表</h2>
        <ul>
            <!--没有指定:key时，Vue自动使用index为key-->
            <li v-for="(person,index) in persons" :key="person.id"><!--以person.id为key动态绑定,推荐写法-->
                {{person.name}}-{{person.age}}<input type="text">
            </li>
        </ul>
        <button @click.once="add">加一个人</button>
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20},
                ]
            },
            methods:{
                add(){
                    this.persons.unshift({id:'004',name:'赵六',age:21})
                }
            }
        })
    </script>
</body>
</html>